/<template>
  <Block class="content-table">
    <div class="action-box">
      <div class="left"></div>
      <div class="right">
        <el-button @click="onAddCoupons">新增卡券</el-button>
      </div>
    </div>
    <div class="table-table">
      <BiTable
        :loading="loading"
        :data="tableData"
        size="medium"
        :column="tableColums"
        fixed="sticky"
        fixed-offset="50"
        pagination
        layout="total, prev, pager, next"
        :auto-scroll="false"
        :total="page_info.total"
        :page.sync="page_info.page"
        :limit.sync="page_info.page_size"
        @pagination="handlePageChange"
      >
        <template v-slot:zip="{ row }">
          <el-button
            type="text"
            size="medium"
            @click="onReceiveDetails(row)"
          >领取详情</el-button>
          <el-button
            type="text"
            size="medium"
            @click="onedit(row)"
          >编辑</el-button>
        </template>
      </BiTable>
    </div>
    <BiDrawer
      v-model="addCouponShow"
      :drawer-title="drawer.title"
      :row-info="drawer.row"
      :component="addCoupons"
      drawer-size="820px"
      @ok="onSubmit"
    ></BiDrawer>
    <BiDrawer
      v-model="receiveLogShow"
      :drawer-title="receive.title"
      :row-info="receive.row"
      :component="receiveLog"
      drawer-size="820px"
    ></BiDrawer>
  </Block>
</template>

<script>
import addCoupons from './component/addCoupons.vue'
import receiveLog from './component/receiveLog.vue'
import { couponIndex } from '@/api/coupons'
export default {
  data() {
    return {
      loading: false,
      addCouponShow: false,
      receiveLogShow: false,
      addCoupons: addCoupons,
      receiveLog: receiveLog,
      drawer: {
        title: '新增',
        row: {}
      },
      receive: {
        title: '领取记录',
        row: {}
      },
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      },
      tableColums: [
        {
          label: '卡券ID',
          prop: 'id'
        },
        {
          label: '卡券名称',
          prop: 'coupon_name'
        },
        {
          label: '权益内容',
          prop: 'gift_title'
        },
        {
          label: '创建时间',
          prop: 'create_time'
        },
        {
          label: '创建人',
          prop: 'operator'
        },
        {
          label: '操作',
          prop: 'zip',
          slotScope: true
        }
      ],
      tableData: []
    }
  },
  mounted() {
    this.onGetList()
    this.$AccessReport.report('taskCenter-coupons', [this.$store.state.user.routerItem.name, '运营管理', '卡劵管理'])
  },
  methods: {
    onReceiveDetails(row) {
      this.receiveLogShow = true
      this.receive = {
        title: '领取记录',
        row: row
      }
    },
    onSubmit() {
      this.onGetList()
    },
    onAddCoupons() {
      this.drawer = {
        title: '新增',
        row: {}
      }
      this.addCouponShow = true
    },
    onedit(row) {
      this.addCouponShow = true
      this.drawer = {
        title: '编辑',
        row: row
      }
    },
    async onGetList() {
      this.loading = true
      try {
        const res = await couponIndex({ ...this.page_info })
        if (res.status_code === 1) {
          this.tableData = res.data.data
          this.page_info = res.data.page_info
        }
        this.loading = false
      } catch (error) {
        this.loading = false
      }
    },
    handlePageChange(value) {
      this.page_info.page = value.page
      this.onGetList()
    }
  }
}
</script>

<style lang="scss" scoped>
.action-box {
  display: flex;
  justify-content: space-between;
}
.table-table {
  margin-top: 20px;
}
</style>